<template>
  <div class="book">
      <span>{{ book.id }} </span>
      <span>{{ book.name }} </span>
      <span>{{ book.author }} </span>
  </div>
</template>

<script>
export default {
    name: 'Book' ,
    data(){
        return {
            book: { id: 1234 , name: 'Vue从入门到放弃' , author: '张阿姨' }
        }
    },
    created(){
        console.log( '- - - Book component created - - -' );
    },
    mounted(){
        console.log( '- - - Book component mounted - - -' );
        console.log( `\t` , this );
    },
    unmounted(){
        console.log( '- - - Book component unmounted - - -' );
    }
}
</script>

<style>
.book {
    display: flex ;
    margin: 10px auto;
}
.book>span:first-child ,
.book>span:last-child {
    flex-basis: 150px ;
}

.book>span:nth-child(2) {
    flex-basis: 300px ;
}

</style>